<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 17:15:11
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-10-10 17:15:33
 * @FilePath: \ekee-web\src\views\end\account-setting\AccountSetting.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="AccountSetting overflow-y">
    <table border="1" width="100%" height="232" class="table_style">
      <tr>
        <td class="table_tr_left">头像</td>
        <td class="table_tr_right">
          <img src="../../../assets/images/account.png" alt="" />
        </td>
      </tr>
      <tr>
        <td class="table_tr_left">用户名</td>
        <td class="table_tr_right">{{ userInfoCompony.realname }}</td>
      </tr>
      <tr>
        <td class="table_tr_left">登录手机号</td>
        <td class="table_tr_right">
          {{
            userInfoCompony.mobile
              ? userInfoCompony.mobile.replace(
                  /(\d{3})(\d{4})(\d{4})/,
                  "$1****$3"
                )
              : ""
          }}
        </td>
      </tr>
    </table>
    <table border="1" width="100%" height="116" class="table_style_account">
      <tr>
        <td class="table_tr_left">账号类型</td>
        <td class="table_tr_right">
          企业账号
          <img
            class="renzheng"
            v-if="componyInfo.review_status == 3"
            src="../../../assets/images/renzheng.png"
          />
        </td>
      </tr>
      <tr>
        <td class="table_tr_left">企业名称</td>
        <td class="table_tr_right">{{ componyInfo.name }}</td>
      </tr>
    </table>
    <!-- 验证 -->
    <div class="account_info">
      <div class="tittle">管理员信息</div>
      <div class="tittle" style="background-color: #ffffff; margin-top: 5px">
        <div class="account">管理员账号</div>
        <div class="phoneNum">{{ componyInfo.mobile }}</div>
        <div class="replaceAccount" @click="replaceAccount($event)">
          更改管理员
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <el-dialog
      v-model="centerDialogVisible"
      :show-close="false"
      width="35%"
      center
      align-center
      class="el_dialog"
      style="
        display: flex;
        align-items: center;
        flex-direction: column;
        border-radius: 16px;
      "
    >
      <div class="test_verify">
        <div class="test_verify_from">
          <div class="tittleInfo">安全验证</div>
          <div class="oldPhoneNum">
            原手机号 :
            {{
              componyInfo.mobile
                ? componyInfo.mobile.replace(
                    /(\d{3})(\d{4})(\d{4})/,
                    "$1****$3"
                  )
                : ""
            }}
          </div>
          <div class="oldPhoneForm">
            <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="60x"
              class="demo-ruleForm"
              :size="formSize"
              status-icon
              style="width: 100%"
            >
              <el-row :gutter="10">
                <el-col :span="14">
                  <el-form-item label="验证码：" prop="phoneCode">
                    <el-input v-model="companyPhone.captcha" />
                  </el-form-item>
                </el-col>

                <el-col :span="10">
                  <el-form-item>
                    <el-button @click="sendCode" type="primary">{{
                      sendText
                    }}</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button class="el_button1" @click="centerDialogVisible = false"
            >取消</el-button
          >
          <el-button
            class="el_button2"
            type="primary"
            @click="centerDialogVisibleBtn()"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 确认修改弹框 -->
    <el-dialog
      v-model="centerDialogVisibleChange"
      :show-close="false"
      width="35%"
      center
      align-center
      class="el_dialog"
      style="
        display: flex;
        align-items: center;
        flex-direction: column;
        border-radius: 16px;
      "
    >
      <div class="test_verify">
        <div class="test_verify_from">
          <div class="tittleInfo">请输入新手机号</div>
          <div class="oldPhoneForm">
            <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="60x"
              class="demo-ruleForm"
              :size="formSize"
              status-icon
              style="width: 100%"
            >
              <el-row :gutter="10">
                <el-col :span="14">
                  <el-form-item label="新手机号" prop="mobile">
                    <el-input v-model="changeMobileInfo.mobile" />
                  </el-form-item>
                </el-col>
                <el-col :span="14">
                  <el-form-item label="验证码：" prop="phoneCode">
                    <el-input v-model="changeMobileInfo.captcha" />
                  </el-form-item>
                </el-col>

                <el-col :span="10">
                  <el-form-item>
                    <el-button @click="sendCodeChange" type="primary">{{
                      sendTextChange
                    }}</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button class="el_button1" @click="centerDialogVisibleChange = false"
            >取消</el-button
          >
          <el-button
            class="el_button2"
            type="primary"
            @click="centerDialogVisibleBtnChange()"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { onMounted, ref } from "vue";
import { CompanyInfo, ChangeMobile ,CheckOldMobile} from "@/api/login";
import { ElMessage } from "element-plus";
import { getUserInfo, removeUserInfo } from "@/service";
import { Login, SmsSend, CaptchaLogin } from "@/api/login";

const count = ref(0);
const phoneNumber = ref("17786292509"); //后续更换接口返回的电话号码
const centerDialogVisible = ref(false);
const centerDialogVisibleChange = ref(false);
const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = ref({
  name: "",
});
const userInfoCompony = ref({});
const componyInfo = ref({});
onMounted(() => {
  const userInfo = getUserInfo();
  console.log("userInfo", userInfo);
  // 企业信息
  userInfoCompony.value = userInfo;
  //企业信息下的公司信息
  componyInfo.value = userInfo.company;
  companyPhone.value.mobile = componyInfo.value.mobile;
  componyCode.value.mobile = componyInfo.value.mobile;
  // console.log("信息", userInfo);
  //获取企业信息
  getCompanyInfo();
});

const companyInfo = ref({});
const getCompanyInfo = () => {
  CompanyInfo().then((res) => {
    if (res.code == 1) {
      companyInfo.value = res.data;
    }
  });
};

const companyPhone = ref({
  mobile: "",
  captcha: "",
});

//修改手机号码
const changeMobileInfo = ref({
  mobile: "",
  captcha: "",
});
//更改管理员
const replaceAccount = (val) => {
  centerDialogVisible.value = true;
};

//确认更改(验证旧手机号)
const centerDialogVisibleBtn = () => {
  CheckOldMobile(companyPhone.value).then((res) => {
    if (res.code == 1) {
      ElMessage({ message: res.msg, type: "success" });
      centerDialogVisible.value = false;
      centerDialogVisibleChange.value = true;
      companyPhone.value.captcha=''
    }
    if (res.code == 0) {
      ElMessage({ message: res.msg, type: "error" });
      centerDialogVisible.value = false;
    }
  });
};

//再次确认修改
const centerDialogVisibleBtnChange=()=>{
  ChangeMobile(changeMobileInfo.value).then((res) => {
    if (res.code == 1) {
      ElMessage({ message: res.msg, type: "success" });
      centerDialogVisible.value = false;
      centerDialogVisibleChange.value = false;
      changeMobileInfo.value.captcha=''
      changeMobileInfo.value.mobile=''
    }
    if (res.code == 0) {
      ElMessage({ message: res.msg, type: "error" });
      centerDialogVisibleChange.value = true;
    }
  });

}
const sendText = ref("获取验证码");
const sendTextChange = ref("获取验证码");

const countDown = ref("");

// const isSend = ref(false)
//获取验证码
const hasCode = ref(true); //是否获取验证码
// const sendCode = () => {
//   if (!hasCode.value) return;
//   runNum();
//   //将当前的号码拿来进行发送请求
// };

//获取验证码
const componyCode = ref({
  mobile: "",
  event: "change_mobile",
});
const sendCode = () => {
  if (!hasCode.value) return;
  //获取成功之后调用
  SmsSend(componyCode.value)
    .then((res) => {
      if (res.code == 1) {
        runNum();
        ElMessage({ message: res.msg, type: "success" });
      } else {
        ElMessage({ message: res.msg, type: "error" });
      }
    })
    .catch((error) => {});
};
const hasCodeChange = ref(true); //是否获取验证码
//确认修改获取的验证码
const sendCodeChange = () => {
  componyCode.value.mobile=changeMobileInfo.value.mobile
  if (!hasCodeChange.value) return;
  //获取成功之后调用
  SmsSend(componyCode.value)
    .then((res) => {
      if (res.code == 1) {
        runNumChange();
        ElMessage({ message: res.msg, type: "success" });
      } else {
        ElMessage({ message: res.msg, type: "error" });
      }
    })
    .catch((error) => {});
};
const runNumChange = () => {
  let n = 60;
  let run = setInterval(() => {
    n--;
    if (n < 0) {
      clearInterval(run);
      hasCodeChange.value = true;
      sendTextChange.value = "重新获取";
    } else {
      sendTextChange.value = n + "s后重新获取";
      hasCodeChange.value = false;
    }
  }, 1000);
};


const runNum = () => {
  let n = 60;
  let run = setInterval(() => {
    n--;
    if (n < 0) {
      clearInterval(run);
      hasCode.value = true;
      sendText.value = "重新获取";
    } else {
      sendText.value = n + "s后重新获取";
      hasCode.value = false;
    }
  }, 1000);
};
</script>

<style lang="less" scoped>
.AccountSetting {
  box-sizing: border-box;
  padding: 16px;
  // border: 1px solid red;
}
.table_style {
  border: 1px solid #e6e6e6;
}
.table_style_account {
  border: 1px solid #e6e6e6;
  margin-top: 22px;
  display: table;
}
.el_button1 {
  width: 178px;
  height: 48px;
  background: rgba(0, 82, 217, 0.12);
  border-radius: 90px 90px 90px 90px;
  opacity: 1;
  font-size: 16px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #2487e8;
  margin: 16px 0px;
}
.el_button2 {
  width: 178px;
  height: 48px;
  background: #2487e8;
  border-radius: 90px 90px 90px 90px;
  opacity: 1;
  font-size: 16px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #fcfcfd;
}
.account_info {
  height: 84px;
  padding: 16px;
  border: 1px solid #e6e6e6;
  margin-top: 22px;
  .tittle {
    height: 46px;
    background: #f5f5f5;
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    padding-left: 16px;
    line-height: 46px;
    display: flex;
    font-size: 16px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.87);
    .account {
      width: 33%;
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.87);
    }
    .phoneNum {
      width: 33%;
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.87);
    }
    .replaceAccount {
      width: 33%;
      font-size: 16px;
      cursor: pointer;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #2487e8;
    }
  }
}
.el_dialog {
  width: 534px;
  height: 270px;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border-radius: 16px;
}
.test_verify {
  // border: 1px solid red;
  // width: 534px;

  display: flex;
  flex-direction: column;
  .test_verify_from {
    // height: 78px;
    padding: 10px 16px 10px 16px;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #e6e6e6;
    margin-top: 32px;
    .tittleInfo {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.87);
      line-height: 40px;
    }
    .oldPhoneNum {
      height: 44px;
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.87);
      line-height: 44px;
    }
  }
  span {
    height: 48px;
    font-size: 23px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #141416;
    line-height: 48px;
    text-align: center;
  }
}
.table_tr_left {
  width: 110px;
  // height: 58px;
  background: #f5f5f5;
  padding-left: 30px;
}
.table_tr_right {
  padding-left: 30px;

  // width: 100%;
  img {
    width: 70px;
    height: 70px;
    // background: #b7d3fe;
    border-radius: 35px;
    opacity: 1;
  }
  .renzheng {
    width: 72px;
    height: 22px;
    border-radius: 0;
    text-align: center;
    vertical-align: middle;
    margin-top: -2px;
  }
}
.enterprise-center {
  color: #888;
}
</style>
